<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
        <link rel="stylesheet" th:href="@{/lib/layui-v2.5.5/css/layui.css}" media="all">
        <script th:src="@{/lib/layui-v2.5.5/layui.js}" charset="utf-8"></script>
        <script th:src="@{/js/jquery-2.1.0.js}"></script>



        
</head>
<script type="text/javascript">
    function sendCode(){
            var mail = document.getElementById("email").value;
            var xmlhttp = new XMLHttpRequest();
            var code = document.getElementById("code");
            var button = document.getElementById("sendMail");
            var ss = document.getElementById("sss");
            var wait = 120;
            if(mail.length > 0){
                 if(button.innerHTML == "发送"){
                    xmlhttp.open("POST", "/send?mail="+mail, false);
                    xmlhttp.send();
                    if(xmlhttp.responseText){
                          ss.action += "?mailcode="+xmlhttp.responseText;
                          function countTime(){
                                  wait --;
                                  if(wait == -1){
                                       clearInterval(stop);
                                       ss.action = "";
                                       code.value = "";
                                       button.innerHTML = "发送";
                                  }else{
                                          button.innerHTML = wait+"秒";
                                  }
                          }
                          var stop = setInterval(countTime, 1000);
                    }
            }}
    }
</script>
<body>
<div id="addform" style="margin: 40px 30%;">
        <form id="sss" class="layui-form" action="/email" method="post">
                <div class="layui-form-item">
                        <label class="layui-form-label">用户名:</label>
                        <div class="layui-input-inline">
                                <input type="text" name="nickName" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                        </div>
                </div>
                <div class="layui-form-item">
                        <label class="layui-form-label">姓&nbsp;&nbsp;&nbsp;名:</label>
                        <div class="layui-input-inline">
                                <input type="text" name="realName" required lay-verify="required" placeholder="请输你的真实姓名" autocomplete="off" class="layui-input">
                        </div>
                </div>
                <div class="layui-form-item">
                        <label class="layui-form-label">手机号码</label>
                        <div class="layui-input-inline">
                                <input type="text" name="phone" required lay-verify="required" placeholder="请输你的手机号码" autocomplete="off" class="layui-input">
                        </div>
                </div>
                <div class="layui-form-item">
                        <label class="layui-form-label">密&nbsp;&nbsp;&nbsp;码:</label>
                        <div class="layui-input-inline">
                                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-form-mid layui-word-aux">0~9和a-z</div>
                </div>
                <div class="layui-form-item">
                        <label class="layui-form-label">重复密码:</label>
                        <div class="layui-input-inline">
                                <input type="password" name="password1" required lay-verify="required" placeholder="请保持密码一致" autocomplete="off" class="layui-input">
                        </div>
                        <div  th:text="${Error}" style="color: red; padding-top:8px;"></div>
                </div>
                <div class="layui-form-item">
                        <label class="layui-form-label">电子邮箱:</label>
                        <div class="layui-input-inline">
                                <input type="text" name="email" id="email" class="layui-input"/>
                        </div>
                </div>
                <div class="layui-form-item">
                        <label class="layui-form-label">验证码:</label>
                        <div class="layui-input-inline" style="display: flex; width: 190px;">
                                <input type="text" name="code" id="code" class="layui-input"/>
                                <button id="sendMail" class="layui-btn layui-btn-normal" onclick="sendCode()" style="width: 100px;margin-left: 20px;">发送</button>
                        </div>
                </div>
                <div class="layui-form-item">
                        <div class="layui-input-block">
                                <input type="submit" class="layui-btn" value="添加">
                                <button type="reset" class="layui-btn">重置</button>
                        </div>
                </div>
        </form>
</div>
</body>
</html>